<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<!-- 处理ie不兼容es6 -->
<!-- <script src="__CDN__/assets/js/frontend/browser.js"></script>
<script src="__CDN__/assets/js/frontend/polyfill.js"></script> -->
<link href="__CDN__/assets/css/frontend.css?v=1627711211" rel="stylesheet">
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<!--引入 element-ui 的样式-->
<link rel="stylesheet" type="text/css" href="__CDN__/assets/js/vue/index.css">
<link rel="stylesheet" type="text/css" href="__CDN__/assets/js/vue/vant.css">
<!-- 引入vue  -->
<script src="__CDN__/assets/js/vue/vue.js"></script>
<!-- 引入element 组件库-->
<script src="__CDN__/assets/js/vue/index.js"></script>
<script src="__CDN__/assets/js/vue/vant.min.js"></script>
<!-- 引入高德地图 sdk -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ba8fbdf4700a74e2f3c7cc363af32fc0"></script> 
<body>
<div id="app" style="height: 100%;width: 100%;display: none;">
    <van-nav-bar
    style="margin-bottom: 6px;"
    title="请确认订单并填写收货人信息" 
    >
    </van-nav-bar>
    <van-sticky>
        <van-cell center is-link :clickable="false" style="margin-bottom: 6px ;box-shadow:rgb(221 221 222) 0px 0px 12px 0px;" @click="userPopup.show = true">
            <template #title>
              <span class="custom-title" style="font-weight: bold;">{{orderForm.name || '请设置收货人信息'}}&nbsp;&nbsp;{{orderForm.phone}}</span>
              <div><span>{{orderForm.addr}}</span></div>
            </template>
        </van-cell>
    </van-sticky>
    <div class="product-list">
        <div class="product-list-item" v-for="(item,index) in product" :key="'product-'+index+'-'+item.id">
            <div style="flex: 1;">
                <div class="tit"> <el-tag effect="dark" style="padding: 0 4px;height: 18px;line-height: 18px;margin-right: 5px;float: left;">{{ item.buy_type }}  </el-tag><div style="line-height: 1.4;width: 100%;">{{item.productName}}</div></div>
                <div v-if="parseInt(item.uamount) != 0" style="color: #a0a0a0;padding: 3px 0;">使用充值金额 : {{item.uamount}}</div>
                <div v-if="parseInt(item.uintegral) != 0"  style="color: #a0a0a0;padding: 3px 0;">使用积分 : {{item.buy_type == '兑换' ? item.point : item.uintegral}}</div>
            </div>
            <div style="display: flex;align-items: center;margin-left:15px;">
                <div style="color: #409eff; font-weight: bold;text-align: right;height: 100%;justify-content: space-between;display: flex;flex-direction: column;padding: 2px 0;" v-if="item.buy_type == '购买'">
                    <div>
                        ￥{{(item.price0 /100).toFixed(2)}}
                    </div>
                    <div>x {{item.amt}}</div>
                </div>
                <div style="color: #409eff; font-weight: bold;" v-else>￥0.00</div>
            </div>
        </div>
        <div>
            <div class="main_view">
                <div class="item" v-if="parseInt(orderForm.totalUamount) != 0">
                    <div class="left-part">使用充值金额</div>
                    <div class="right-part">{{orderForm.totalUamount}}</div>
                </div>
                <div class="item" v-if="parseInt(orderForm.totalUintegral) != 0">
                    <div class="left-part">使用积分</div>
                    <div class="right-part">{{orderForm.totalUintegral}}</div>
                </div>
                <div class="item">
                    <div class="left-part">使用定金</div>
                    <div class="right-part">{{orderForm.yh_ticket}}</div>
                </div>
                <div class="item">
                    <div class="left-part">本单积分</div>
                    <div class="right-part">{{orderForm.singleIntegral}}</div>
                </div>
                <div class="item">
                    <div class="left-part">订单总额</div>
                    <div class="right-part">{{orderForm.totalAmount}}</div>
                </div>
                <div class="item">
                    <div class="left-part">应收金额</div>
                    <div class="right-part">{{orderForm.receivable}}</div>
                </div>
                <div class="item">
                    <div class="left-part">实收金额</div>
                    <div class="right-part">{{orderForm.paidIn}}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="order-info">
        <van-cell-group>
            <!-- <van-cell size="large" center title="是否需要发票" >
                <van-switch size="20px" v-model="orderForm.sendnotice" :active-value="1" :inactive-value="2" ></van-switch>
            </van-cell> -->
            <van-cell size="large" center title="送货说明" is-link @click="notePopup.show  = true">
                <div slot="default">{{orderForm.note}}</div>
            </van-cell>
        </van-cell-group>
    </div>
    <div style="height:100px;"></div>
    <div id="bottom-bar">
        <el-row style="height: 100%;" :gutter="0" type="flex" justify="end" style="background-color: #fff;border-top: 1px solid #dad8d8;">
            <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: flex-end;padding-right: 15px;">
                <el-button type="primary" size="small" @click="handleConfirmOrder">确认并提交订单</el-button>
            </div>
        </el-row>
    </div>
    <!-- 设置送货说明弹出层 -->
    <van-popup v-model="notePopup.show" position="bottom" >
        <div style="padding:7px 5px 5px;background-color: #e4e8ee;height: 100%;">
            <van-field
            border
            style="border-radius: 5px;"
            v-model="orderForm.note"
            rows="6"
            autosize
            type="textarea"
            placeholder="请输入送货说明"
            maxlength="50"
            show-word-limit
            ></van-field>
        </div>
        
    </van-popup>
    <!-- 设置收货人信息弹出层 -->
    <van-popup v-model="userPopup.show" position="top" >
        <div style="min-height: 30vh;background-color: #f0f0f0;padding: 5px;">
            <van-form style="border-radius: 5px;overflow: hidden;" label-width="6em"  @submit="submit">
                <div style="max-height: 45vh;overflow-y: auto;">
                    <van-field
                        v-model="orderForm.name"
                        name="收货人姓名"
                        label="收货人姓名"
                        placeholder="请输入"
                        :rules="[{ required: true, message: '' }]"
                    ></van-field>
                    <van-field
                        type="number"
                        v-model="orderForm.phone"
                        name="收件电话"
                        label="收件电话"
                        placeholder="请输入"
                        :rules="[{ validator: validator,required: true, message: '请输入正确的收件电话' }]"
                    ></van-field>
                    <van-field
                    v-model="diqu.fieldValue "
                    is-link
                    readonly
                    label="地区"
                    placeholder="请选择所在地区"
                    @click="diqu.show = true"
                    :rules="[{ required: true, message: '' }]"
                    ></van-field>
                    <van-field
                        type="textarea"
                        rows="3"
                        autosize
                        v-model="orderForm.addr"
                        name="详细地址"
                        label="详细地址"
                        placeholder="请输入"
                        :rules="[{ required: true, message: '' }]"
                    >
                    <template #button>
                        <div @click="selectNearby" style="display: flex;align-items: center;color: #59a2eb;">
                            <van-icon name="location" ></van-icon> <span>定位</span>
                        </div>
                        
                    </template>
                </van-field>
                </div>
                <div style="margin: 10px;">
                    <van-button size="small" round block type="info" native-type="submit">确定</van-button>
                </div>
            </van-form>
        </div>
    </van-popup>
    <!-- 选择地址弹层( 省市区)  -->
    <van-popup v-model="diqu.show" round position="bottom">
        <van-cascader
            :field-names="{
                text: 'name',
                value: 'id',
                children: 'children' 
            }"
          v-model="diqu.value"
          title="请选择所在地区"
          :options="provinceList"
          @close="diqu.show = false"
          @change="onChange"
          @finish="onFinish"
        >
    </van-popup>  
    <!-- 选择地址弹层( 周边搜索)  -->
    <van-popup v-model="Nearby.show" position="bottom" closeable >
        <div style="display: flex;height: 100vh;flex-direction: column;">
             <!-- 高德地图载体 -->
            <div id="container" style="width: 100%;flex: 1;">

            </div>
            <div v-loading="searchLoading" style="height: 65vh;overflow: hidden;display: flex;flex-direction: column;">
                <van-search shape="round" v-model="keyworld" placeholder="请输入搜索关键词" @search="searchLocation"></van-search>
                <div style="flex: 1;overflow: auto;" v-if="addressList.length">
                    <van-cell is-link @click="clickNearby(item)" :title="item.name" icon="location-o" v-for="(item,index) in addressList" :key="item.id"></van-cell>
                </div>
                <van-empty v-else image="search" description="没找地址信息~"></van-empty>
            </div>
        </div>
    </van-popup>
</div>
</body>
<style>
    body{
        background-color: #F5F5F5;
    }
    .product-list{
        background-color: #fff;
        padding:5px 10px;
        margin-bottom: 6px;
    }
    .product-list .product-list-item{
        min-height: 70px;
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
    }
    .product-list .main_view{
        border-top:1px solid #ccc ; 
        padding: 10px 0 5px;
    }
    .product-list .main_view .item{
        display: flex;
        padding:  0 10px;
    }
    .product-list .main_view .item .right-part{
        text-align: right;
    }
    .product-list .main_view .item div{
        flex: 1;
        line-height: 1.6;
    }

    .product-list .product-list-item:nth-child(n+2){
        border-top:1px solid #ccc ; 
    }
    .product-list .product-list-item .tit{
        font-weight: bold;
    }
    .order-info .van-cell .van-cell__value{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .order-info .van-cell__title{
        flex: unset;
        margin-right: 10px;
        white-space:nowrap;
    }
    #bottom-bar{
        z-index: 10;
        position: fixed;
        bottom: 0;
        background-color: #fff;
        height: 48px;
        width: 100%;
        border-top: 1px solid #dad8d8;
    }
</style>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    var require = {
        config: {
            "site":{"name":"\u4f73\u5bb6\u8bda\u54c1","cdnurl":"","version":Date.parse(new Date()),"timezone":"Asia\/Shanghai","languages":{"backend":"zh-cn","frontend":"zh-cn"}},
            "upload":{"cdnurl":"","uploadurl":"\/index\/ajax\/upload","bucket":"local","maxsize":"10mb","mimetype":"jpg,png,bmp,jpeg,gif,zip,rar,xls,xlsx,wav,mp4,mp3,pdf","chunking":false,"chunksize":2097152,"savekey":"\/uploads\/{year}{mon}{day}\/{filemd5}{.suffix}","multipart":[],"multiple":false,"storage":"local"},
            "modulename":"order_draft",
            "controllername":"share",
            "actionname":"order_draft",
            "jsname":"frontend\/share",
            "moduleurl":"\/index",
            "language":"zh-cn",
            "token":"c0f4e22a-8882-4c1b-a7d3-21a5805a1d94",
            "__PUBLIC__":"\/","__ROOT__":"\/","__CDN__":""}    
    };

    var globalData=eval(<?php echo json_encode($data);?>);
    /*
     * 注意：
     * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
     * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
     * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
     * 邮箱地址：weixin-open@qq.com
     * 邮件主题：【微信JS-SDK反馈】具体问题
     * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
     */
    //这里使用wx调用config接口，填写配置项
    wx.config({
        debug: false,
        appId:'{$signPackage.appId}' ,
        timestamp:'{$signPackage.timestamp}',
        nonceStr:'{$signPackage.nonceStr}' ,
        signature: '{$signPackage.signature}',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ],success: function(res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
    wx.ready(function(){
        wx.onMenuShareAppMessage({
            title: '{$msg.title}', // 分享标题
            desc: '{$msg.desc}', // 分享描述
            link: '{$msg.link2}', // 分享链接
            imgUrl: '{$msg.image}', // 分享图标
            success: function () {
                //设置成功
            }
        });
    })
</script>
<script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1627711211"></script>
</html>